<script setup lang="ts">
import {} from "vue";
import { QCardSection, QSpace } from "quasar";

import { User } from "qqlx-core";
import { getUserName } from "qqlx-cdk";

import { ComAvatar } from "../ComAvatar";
import { jumpAccount } from "../utils/view.tab";

const vueProps = defineProps<{
  user: User;
}>();
</script>

<template>
  <a class="rounded bg-white overflow-hidden relative flex flex-col" @click="jumpAccount()">
    <q-card-section class="flex colorful-background h-1/2">
      <ComAvatar class="mx-auto" :user="vueProps.user" :size="56"></ComAvatar>
    </q-card-section>

    <q-space></q-space>
    <q-card-section class="text-center">
      <div class="truncate text-lg">{{ getUserName(vueProps.user) }}</div>
      <div class="truncate text-xs">欢迎使用</div>
    </q-card-section>
  </a>
</template>

<style></style>
